<template>
	<view class="container">
		<view class="card">
			<view class="title flex-row">
				<view class="name">会议主题/内容</view>
			</view>
			<view class="item flex-row">
				<textarea v-model="form.content" placeholder="输入主题内容..." />
			</view>
			<view class="item flex-row">
				<view class="label">会议类型</view>
				<view class="input flex-row">
					<picker @change="changeType" :value="typeIndex" :range="types">
						<view class="value">{{ types[typeIndex] }}</view>
					</picker>
					<uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
				</view>
			</view>
			<view class="item flex-row">
				<view class="label">会议周期</view>
				<view class="input flex-row">
					<picker @change="changeCycle" :value="cycleIndex" :range="cycles">
						<view class="value">{{ cycles[cycleIndex] }}</view>
					</picker>
					<uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
				</view>
			</view>
			<view class="item flex-row">
				<view class="label">会议日期</view>
				<view class="input flex-row">
					<!--日期：周期为 仅一次-->
					<picker v-if="cycleIndex == 0" @change="changeDate" :value="form.meettime" mode="date">
						<view class="value">{{ form.meettime }}</view>
					</picker>
					<!--日期：周期为 每日-->
					<picker v-if="cycleIndex == 1" @change="changeTimes" :value="timeIndex" :range="days">
						<view class="value">{{ days[timeIndex] }}</view>
					</picker>
					<!--日期：周期为 每周-->
					<picker v-if="cycleIndex == 2" @change="changeTimes" :value="timeIndex" :range="weeks">
						<view class="value">{{ weeks[timeIndex] }}</view>
					</picker>
					<!--日期：周期为 每月-->
					<picker v-if="cycleIndex == 3" @change="changeTimes" :value="timeIndex" :range="months">
						<view class="value">{{ months[timeIndex] }}</view>
					</picker>
					<uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
				</view>
			</view>
			<view class="item flex-row">
				<view class="label">开始时间</view>
				<view class="input flex-row">
					<picker @change="changeStartTime" :value="starttime" mode="time">
						<view class="value">{{ starttime }}</view>
					</picker>
					<uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
				</view>
			</view>
			<view class="item flex-row">
				<view class="label">结束时间</view>
				<view class="input flex-row">
					<picker @change="changeOverTime" :value="overtime" mode="time">
						<view class="value">{{ overtime }}</view>
					</picker>
					<uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
				</view>
			</view>
			<view class="item flex-row">
				<view class="label">参与人员</view>
				<view class="input flex-row" @click="toSelectMember">
					<input v-model="checkedNamesStr" placeholder="选择参会人员" disabled/>
					<uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
				</view>
			</view>
			<view class="item flex-row">
				<view class="label">会议地点</view>
				<view class="input flex-row">
					<input v-model="form.address" placeholder="输入会议地点"/>
				</view>
			</view>
			<view class="item flex-row">
				<view class="label">演讲人</view>
				<view class="input flex-row">
					<input v-model="form.host_man" placeholder="输入演讲人员"/>
				</view>
			</view>
			<view class="item flex-row">
				<view class="label">负责人</view>
				<view class="input flex-row">
					<view class="value">{{ userName }}</view>
				</view>
			</view>
			<view class="item btns flex-row">
				<view class="label"></view>
				<view class="input flex-row">
					<view @click="create" class="btn">创建会议</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import { date } from '@/common/function.js';
import { MEETING_TYPE, MEETING_CYCLE } from '@/common/config.js';
export default{
	components: { uniIcons },
	data(){
		return {
			types: MEETING_TYPE,
			cycles: MEETING_CYCLE,
			days: ['工作日','每天'],
			weeks: ['周一','周二','周三','周四','周五','周六','周天'],
			months: ['第一个工作日','最后一个工作日'],
			typeIndex: 0,
			cycleIndex: 0,
			timeIndex: 0,
			starttime: '',
			overtime: '',
			checkedNamesStr: '',
			userName: '',
			form: {
				userid: uni.getStorageSync("userid"),
				content: '',
				type: MEETING_TYPE[0],
				cycle: 1,
				meettime: '',
				starttime: '',
				overtime: '',
				join_man_ids: '',
				join_man_names: '',
				host_man: '',
				address: ''
			}
		}
	},
	onLoad(){
		this.doDateTime();
		this.getUserDetail();
	},
	onShow(){
		// 处理参会人员
		let checkedIds = uni.getStorageSync("checked_meeting_ids");
		let checkedNames = uni.getStorageSync("checked_meeting_names");
		if(checkedIds && checkedIds.length) this.form.join_man_ids = checkedIds.join(',');
		if(checkedNames && checkedNames.length){
			this.form.join_man_names = checkedNames.join(',');
			this.checkedNamesStr = `已选取${checkedNames[0]}等${checkedNames.length}人`;
		}
	},
	onBackPress(){
		uni.showModal({
			title: '是否取消创建会议？',
			content: '确认即取消会议',
			success: (res)=>{
				if(res.cancel) return true;
				if(res.confirm){
					uni.removeStorageSync('checked_meeting_ids');
					uni.removeStorageSync('checked_meeting_names');
					uni.redirectTo({url: 'index'});
				}
			}
		});
		return true;
	},
	methods: {
		goBack(){
			uni.navigateBack();
		},
		toPage(url){
			if(url) uni.navigateTo({url});
		},
		// 处理会议日期
		doDateTime(){
			let { year, month, day, hours, minutes } = date();
			this.form.meettime = `${year}-${month}-${day}`;
			
			// 处理分钟
			let intHours = Number.parseInt(hours);
			if(minutes == '00'){
				this.starttime = `${hours}:00`;
				this.overtime = intHours < 23 ? `${intHours+1 < 10 ? '0'+(intHours+1) : intHours+1}:00` : '00:00';
			}else{
				this.starttime = intHours < 23 ? `${intHours+1 < 10 ? '0'+(intHours+1) : intHours+1}:00` : '00:00';
				this.overtime = intHours < 23 ? `${intHours+2 < 10 ? '0'+(intHours+2) : intHours+2}:00` : '01:00';
				if(this.overtime == '24:00') this.overtime = '00:00';
			}
			this.form.starttime = this.starttime+':00';
			this.form.overtime = this.overtime+':00';
		},
		// 切换会议类型
		changeType(e){
			this.typeIndex = e.detail.value;
			this.form.type = this.types[this.typeIndex];
		},
		// 切换会议周期
		changeCycle(e){
			this.cycleIndex = e.detail.value;
			this.form.cycle = this.cycleIndex + 1;
			
			// 处理会议日期
			this.timeIndex = 0;
			this.form.meettime = 1;
		},
		// 切换日期
		changeDate(e){
			this.form.meettime = e.detail.value;
		},
		// 切换日期：适用于会议周期不是仅一次的情况
		changeTimes(e){
			this.timeIndex = e.detail.value;
			this.form.meettime = this.timeIndex + 1;
		},
		// 切换开始日期
		changeStartTime(e){
			this.starttime = e.detail.value;
			this.form.starttime = this.starttime+':00';
		},
		// 切换结束日期
		changeOverTime(e){
			this.overtime = e.detail.value;
			this.form.overtime = this.overtime+':00';
		},
		// 选择参会人员
		toSelectMember(){
			uni.navigateTo({
				url: 'member'
			})
		},
		// 创建会议
		create(){
			if(!this.form.content){
				return uni.showToast({icon: 'none', title: '请输入主题内容'})
			}
			if(!this.form.join_man_ids){
				return uni.showToast({icon: 'none', title: '请选择会议参与人员'})
			}
			if(!this.form.address){
				return uni.showToast({icon: 'none', title: '请输入会议地点'})
			}
			if(!this.form.host_man){
				return uni.showToast({icon: 'none', title: '请输入演讲人名称'})
			}
			
			// 保存数据
			uni.showLoading({title: '保存中'});
			uni.request({
				url: this.$API.eduSafeMeetingAdd,
				data: this.form,
				method: 'POST',
				header: this.$API.get_head(),
				success: (res)=>{
					uni.hideLoading();
					if(res.data.code == 0){
						uni.removeStorageSync('checked_meeting_ids');
						uni.removeStorageSync('checked_meeting_names');
						uni.redirectTo({url: 'index'});
					}else{
						uni.showToast({icon: 'none', title: '保存失败'});
					}
				},
				fail(){
					uni.hideLoading();
				}
			})
		},
		//获取用户信息
		getUserDetail(){
			let _this = this;
			uni.request({
				url: this.$API.getUserDetail,
				method:"POST",
				data:{ userid: this.form.userid},
				header:this.$API.get_head(),
				success: (res) => {
					_this.userName = res.data.data.NAME;
				}
			})
		}
	}
}
</script>

<style scoped>
textarea{
	width: 100%;
	height: 120upx;
	font-size: 28upx;
	background: #F2F2F2;
	padding: 12upx 18upx;
	border-radius: 12upx;
}
picker{
	width: calc(100% - 40upx);
	height: 68upx;
	line-height: 68upx;
}
	
.card{
	margin: 20upx;
	border-radius: 12upx;
	background: #fff;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view.name{
	height: 60upx;
	font-size: 30upx;
	text-indent: 24upx;
	font-weight: bold;
	position: relative;
}
.card .title view.name::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #5F96F2;
	border-radius: 4upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
.card .item{
	margin-bottom: 20upx;
}
.card .item .label{
	width: 160upx;
}
.card .item .input{
	width: calc(100% - 160upx);
	height: 68upx;
	line-height: 68upx;
	padding: 0 20upx;
	background: #F2F2F2;
	border-radius: 12upx;
	box-sizing: border-box;
}
.card .item  input,
.card .item .value{
	height: 68upx;
	line-height: 68upx;
	font-size: 28upx;
}
.card .item.btns .input{
	padding: 0;
	background: none;
}
.btn{
	color: #fff;
	width: 200upx;
	height: 52upx;
	font-size: 26upx;
	line-height: 52upx;
	border-radius: 6upx;
	text-align: center;
	text-indent: 0;
	margin-right: 20upx;
	background-color: red;
}
</style>
